<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom"> 当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">北京</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom"> 热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper" v-for="item of hotCities" :key="item.id">
                        <div class="button">{{item.name}}</div>
                    </div>
                    
                </div>
            </div>
            <!-- 循环对象时，key对应的就是每个对象的名字 这里就是ABCD...-->
            <!-- :ref="key"时 指的是将这个 class area 添加一个id 为key的，即 ID 为A B C 表示分别表示一个area  -->
            <div class="area"
                 v-for="(item,key) of cities"
                 :key="key"
                 :ref="key"
                 >
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list " v-for="i of item" :key = "i.id">
                    <div class="item border-bottom">{{ i.name }}</div>                   
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default{
    name:'CityList',
    props:{
        hotCities:Array,
        cities:Object,
        letter:String
    },
    mounted ( ) {
        // 这句代码可以这样理解 ：滚轮 滚到当前（ref指向的） DOM 元素 所包裹的区域
        // better scroll 提供了接口(Bscroll)  this.scroll = new Bscroll(this.$refs.wrapper)
        this.scroll = new Bscroll(this.$refs.wrapper)
    },
    watch: {
       letter () {
           if (this.letter) {
            //  srollToElement这个方法接收的参数必须是DOM元素，或DOM选择器
            //   this.$refs[this.letter]这个实际上是一个数组，所以要在后头加[0]
               const element = this.$refs[this.letter][0]
               console.log(element)
               this.scroll.scrollToElement(element)
           }
       } 
    }

}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .border-topbottom
        &:before
            border-color: #ccc
        &:after
           border-color: #ccc 
    .border-bottom
        &:before
            border-color: #ccc
        &:after
           border-color: #ccc 
    .list 
        overflow:hidden
        position: absolute 
        top:1.6rem
        left:0
        right:0
        bottom:0
        .title
            line-height:.54rem 
            background: #eee 
            padding-left: .2rem
            color:#666
            font-size:.26rem 
        .button-list
            overflow:hidden
            padding:.1rem .6rem .1rem .1rem
            .button-wrapper
                float: left 
                width: 33.33%
                .button
                    text-align:center
                    margin: .1rem
                    border: .02rem solid #ccc
                    border-radius:.06rem
                    line-height:.5rem
        .item-list
            .item
                line-height:.7rem 
                
                padding-left: .2rem   
</style>